<template>
	<ul>
		<li v-for="item in filmList">
			<router-link :to="{name:'detail', params:{'id':item.id}}">
				<div class="imgbox">
					<img :src="item.poster.thumbnail" alt=""/>
				</div>
				<div class='info'>
					<p class="fm">
						<span class="filmname">{{item.name}}</span>
						<span class="scroe">{{item.grade}}<span class="gt">&gt;</span></span>
					</p>
					<p class="desc">{{item.intro}}</p>
					<p class="film-counts">
						<span>{{item.cinemaCount}}家影院上映</span>
						<span class="buy">{{item.watchCount}}人购票</span>
					</p>
				</div>
			</router-link>
		</li>
	</ul>	
</template>
<script>
	import $ from 'jquery';
	export default{
		data:function() {
			return {
				filmList:[],
				page:1
				
			}
		},
		methods:{
			getData:function() {
				var that = this;
				var t = new Date().getTime();
				var listUrl = 'http://localhost:3000/hot?time='+t+'&page='+that.page+'&count=7';
				$.get(listUrl,function(res) {
					var data = res.data.films;
					for (var i = 0; i < data.length; i++) {
						that.filmList.push(data[i])
					}
				});
			}
		},
		mounted:function() {
			this.getData();
		    
		    //获取当前可视范围的高度 
		    var wh = $(window).height();
		    //获取文档完整的高度
		   	var that = this;
			$(window).on('scroll',function(){
				var dh = $(document).height();
				var scrolltop = $('body').scrollTop();
				if (scrolltop + wh == dh) {
					that.page++;
					that.getData();
				}		
			})
		}
	}
	
</script>
<style>
	.tab .router-link-active{
		color: #fe6e00;
		border-bottom: solid;
	}
</style>
